<template>
	<div>

		<div class="add">
			<span>添加商品品牌</span>
			<el-button icon="el-icon-plus" type='danger' circle  @click="drawer = true"></el-button>
		</div>
		
		<el-drawer
		  size="80%"  
		  title="添加品牌"
		  :visible.sync="drawer"
		  :direction="direction"
		>
		  <el-input style="padding: 10px;" v-model="new_brand" placeholder="请输入添加的品牌名称"></el-input>
		  <el-button type="primary" v-on:click='add_brand()'   style="display: block; width: 80%; margin: 10px auto;" >保存品牌</el-button>
		</el-drawer>

		<div class="item" v-for='item in item_list'>
			<span>{{item.brand_name}}</span>
			
			<span class="ch">修改</span>
			<span class="del">删除</span>
		</div>
		
		
		<div style="margin-bottom: 60px;width: 100%;"></div>

	</div>
</template>

<script>
	import {
		add_brand_url, select_all_brand_url
	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: {},
		data() {
			return {
				item_list:[{'id': 1, 'brand_name': '苏宁'}, {'id': 2, 'brand_name': '国美'}],
				drawer: false,
				direction: 'ttb',
				new_brand: ''
			}
		},
		methods: {
			add_brand(){
				this.$axios({
					method: 'GET',
					url: add_brand_url,
					params: { //这里是发送给后台的数据
						brand: this.new_brand,
					}
				}).then((response) => { //这里使用了ES6的语法
					console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						
						
						this.$message({
							message: "商品："+this.new_brand+"   添加成功",
							type: 'success'
						})
						setTimeout(function (){
						 
							window.location.reload();
						}, 2000)
					} else {
						console.log(response.data.errorMsg)
						// this.$Message.error('config')
						this.$message({
							message: response.data.errorMsg + '!!!',
							type: 'error'
						})
					}
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			
			this.$axios({
				method: 'GET',
				url: select_all_brand_url,
			}).then((response) => { //这里使用了ES6的语法
				console.log(response) //请求成功返回的数据
				this.item_list = response.data.resultBody.reverse()
			}).catch((error) => {
				// console.log(error) //请求失败返回的数据
				this.$message({
					message: '请联系管理员' + '!!!',
					type: 'error'
				})
			})

		},
	}
</script>

<style scoped lang="less">
	.add {
		width: 100%;
		height: 60px;
		background-color: #F0F0F0;
		line-height: 60px;

		span {
			font-size: 20px;
			font-weight: 700;
			display: inline-block;
			margin-left: 20px;
		}

		.el-button {
			display: inline-block;
			margin-left: 20px;
		}
	}
	
	.item{
		position: relative;
		width: 100%;
		height: 45px;
		line-height: 45px;
		font-size: 18px;
		font-weight: 600;
		background-color: #F0F0F0;
		margin-top: 8px;
		span{
			margin-left: 10px;
		}
		
		.del{
			display: inline-block;
			position: absolute;
			right: 10px;
			font-weight: 400;
			color: darkred;
		}
		
		.ch{
			display: inline-block;
			position: absolute;
			right: 60px;
			font-weight: 400;
			color: seagreen;
		}
	}
</style>
